<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/login.css" />
<link type="text/css" rel="stylesheet" href="css/message.css" />

   <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
   <script type="text/javascript" src="js/message.min.js"></script>
   <script type="text/javascript" src="js/login.js"></script>
   <script type="text/javascript">

      //正则验证用户名
      function checkUser(str){
         var re = /^[a-zA-z]\w{3,15}$/;
         if(re.test(str)){
            return "username";
         }else{
            return false;
         }
      }

      //正则验证手机号
      function checkMobile(str) {
         var re = /^1\d{10}$/
         if (re.test(str)){
            return "phone";
         }else{
            return false;
         }
      }

      //正则验证邮箱
      function checkEmail(str){
         var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
         if(re.test(str)){
            return "email";
         }else{
            return false;
         }
      }

      //验证输入的账号格式
      function checkAccount(str) {
         if(checkUser(str)=="username"){
            return "uname="+str;
         }else if(checkMobile(str)=="phone"){
            return "uphone="+str;
         }else if(checkEmail(str)=="email"){
            return "uemail="+str;
         }else {
            $.message({
               message:"请输入正确的账号",
               time:1500,
               type:"warning"
            })
            return false;
         }
      }

      //后台验证登录用户
      function loginCheck(username,password) {
         $.post("user/login",username+"&upassword="+password,function (bol) {
            if(bol=="true"){
               $.message({
                  message:"登录成功",
                  time:"2000"
               })
               setTimeout(function () {
                  location.href="index.jsp";
               },1500);
            }else {
               $.message({
                  message:"用户名或密码错误",
                  time:"2000",
                  type:"error"
               })
            }
         })
      }

      //验证是否勾选用户协议
      function isbox() {
         if($("#isbox")[0].className=="CheckBox Yes"){
            $("[name='logindiv']")[0].style="opacity:0.5;"
         }else {
            $("[name='logindiv']")[0].style="opacity:1;"
         }
      }

      $(document).on("click","#loginid",function () {
         var username = $("[name='username']").val();
         var password = $("[name='password']").val();
         if($("#isbox")[0].className=="CheckBox Yes"){
            var checked = checkAccount(username)
            if(checked!=false){
               loginCheck(checked,password);
            }
         }
      })


   </script>
<title>登录</title>
</head>

<body>
<div class="header">
   <div class="mainwarp">
      <div class="logo"><a href="index.jsp"><img src="images/log.png" /></a></div>
      <div class="welcome">欢迎登录</div>
      <div class="headerright">
         <a href="index.jsp">返回首页</a>
      </div>
   </div>
</div>
<div class="content">
   <div class="logtype"></div>
   <div class="clear"></div>
   <div class="logoDiv">
      <div class="logoLeft">
         <div class="leftimg">
            <img src="images/log1.gif" />
         </div>
         <div class="leftcon">
            <a href="" class="a1">手机触屏版</a>
            <a href="" class="a2">Android客户端下载</a>
            <a href="" class="a3">iPhone客户端下载</a>
         </div>
      </div>
      <div class="logoRight">
         <div class="normalLogin">
            <div class="username">
               <span></span>
               <input name="username" type="text" placeholder="请输入用户名/邮箱/已验证手机号"/>${bol}
            </div>
            <div class="password">
               <span></span>
               <input name="password" type="password" placeholder="请输入密码"/>
            </div>
            <div class="autoLogo">
               <a href="password.jsp" class="pasd">忘记密码？</a>
            </div>
            <div class="autoLogo">
               <span class="CheckBox Yes" id="isbox" onclick="isbox();"></span>
               <span>我已阅读并接受<a href="user_agreement.jsp">用户协议</a></span>
            </div>
            <div class="logobtn" name="logindiv">
               <a href="#" id="loginid" onclick="return false">登  录</a>
            </div>
            <div class="zcbtn">
               <a href="register.jsp">还没有账号？立即注册</a>
            </div>
         </div>
         <div class="weixinLogin">
            <div class="weixinQr">
               <img src="images/showqrcode.jpg" width="150" class="useHelpcon"/>
               <p>使用微信扫描上方二维码</p>
               <p class="useHelp useHelpcon">使用帮助</p>
            </div>
            <div class="zcbtn">
               <a href="register.jsp">还没有账号？立即注册</a>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="clear"></div>
</body>
</html>
